<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="servicer" value="${sessionScope.servicer}" />
<c:set var="user" value="${sessionScope.user}"/>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE HTML>
<html>

<head>
  <title>登录</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
  <!-- CSS -->
  <link href="${path}/pet/home/css/animate.css" rel="stylesheet" type="text/css"/>
  <link href="${path}/pet/home/css/bootstrap.css" rel="stylesheet" type="text/css"/>
  <link href="${path}/pet/login/css/login.css" rel="stylesheet" type="text/css"/>

  <!-- js files -->
  <script type="text/javascript"  language="javascript" src="${path}/pet/home/js/jquery.min.js"></script>
  <script type="text/javascript"  language="javascript" src="${path}/pet/home/js/mobile_tab.js"></script>
</head>

<body>
<div id="page">
  <div class="page-inner">
    <!-- 导航栏 -->
    <nav class="gtco-nav">
      <div class="gtco-container">
        <div class="row">
          <div class="col-xs-8 text-right menu-1" style="width:1080px">
            <ul>
              <li><a href="${path}/home">首页</a></li>
              <li><a href="${path}/chat">社交</a></li>
              <li><a href="${path}/chat?role=kf">客服</a></li>
              <li><a href="${path}/myAccount">我的</a></li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
    <header id="gtco-header" class="gtco-cover" role="banner" style="background-image:url(<%=request.getContextPath()%>/pet/login/images/C_1.jpg)">
      <div class="overlay"></div> <!-- 调节背景色的透明度 -->
      <div class="gtco-container">
        <div class="row">
          <div class="col-md-12 col-md-offset-0 text-left">
            <div class="row row-mt-15em">
              <!-- 网页左侧的字 -->
              <div class="col-md-7 mt-text animate-box header fadeInUp animated-fast" data-animate-effect="fadeInUp">
                <span class="intro-text-small">宠物保险平台</span>
                <h1>用心保护您的宠物</h1>
              </div>
              <div class="col-md-4 col-md-push-1 animate-box regist" data-animate-effect="fadeInRight">
                <div class="form-wrap">
                  <div class="tab-menu">
                    <span>用户登录</span>
                  </div>
                  <div class="tab-content">
                    <form action="#">
                      <div class="row form-group">
                        <div class="col-md-12">
                          <label for="username">用户名</label>
                          <input type="text" class="form-control" id="username" placeholder="请输入用户名" autocomplete="off">
                          <div id="username1" style="color: #FD3F31;display: none;">用户名不能为空</div>
                        </div>
                      </div>
                      <div class="row form-group">
                        <div class="col-md-12">
                          <label for="password">密码</label>
                          <input type="password" class="form-control" id="password" placeholder="请输入密码" autocomplete="off">
                          <div id="pwd1" style="color: #FD3F31;display: none;">密码不能为空</div>
                        </div>
                      </div>
                      <div class="row form-group">
                        <div class="create">
                          <a href="${path}/regist">注册</a>
                        </div>
                      </div>
                      <div class="row form-group">
                        <div class="col-md-12">
                          <input id="login" type="button" class="btn btn-primary" value="登录">
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  </div>
</div>
</body>

<script type="text/javascript">
  $(function() {
    //失去焦点时，用户名不能为空
    $("#username").blur(function(){
      var uname = $.trim($("#username").val());
      if(uname.length <= 0) {
        $("#username1").toggle();
      } else {
        $("#username1").hide();
      }
    });

    //失去焦点时，密码不能为空
    $("#password").blur(function(){
      var pwd = $.trim($("#password").val());
      if(pwd.length <= 0) {
        $("#pwd1").toggle();
      } else {
        $("#pwd1").hide();
      }
    });

    //用户登录
    $("#login").click(function() {
      var username = $.trim($("#username").val());
      var pwd = $.trim($("#password").val());
      $.ajax({
        type: 'POST',
        url: '/user/login',
        dataType: "json",
        data: {username:username,pwd:pwd},
        error: function () {
          console.log("失败");
        },
        success: function (data) {
          if(data.msg=="欢迎登陆商城"){
            if(data.role == "客服"){
              window.location.href = '${path}/chat?role=kfjs';
            } else {
              window.location.href = '${path}/home';
            }
          } else if(data.msg=="该用户不存在"){
              alert('该用户不存在！');
          } else if(data.msg=="用户名或密码不正确") {
              alert('用户名或密码不正确');
          } else if(data.msg=="用户名或密码不能为空！") {
              alert('用户名或密码不能为空！');
          }
        }
      });
    });
  });
</script>

</html>